<style>
	/** 更改编辑器的高度 **/
  .w-e-text-container {
    height: 500px !important;
    /*!important是重点，因为原div是行内样式设置的高度300px*/
  }
</style>
<div class="layui-fluid" lay-title="编辑微语">
	<form class="layui-form" action="" lay-filter="form-group">
		<input type="text" name="id" style="display:none">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">微语内容</div>
					<div class="layui-card-body layui-row layui-col-space10">
						<div class="layui-col-md12" id="editor_weiyu">

						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">是否公开</label>
					<div class="layui-input-block">
						<input type="checkbox" name="status" lay-skin="switch" lay-text="ON|OFF">
						<button type="button" style="float:right;width:180px;" class="layui-btn" lay-submit="" lay-filter="weiyu-submit">立即提交</button>
					</div>
				</div>

			</div>
		</div>
	</form>
</div>
<script type="text/javascript">
	var $ = layui.$;
	let E = window.wangEditor;
	var editor = new E('#editor_weiyu');

	// fcup上传id
	editor.customConfig.fcupId = 'weiyu_id';
	//editor.customConfig.uploadImgShowBase64 = true;
	editor.customConfig.pasteFilterStyle = false;
	editor.customConfig.menus = [
		'head', // 标题
		'bold', // 粗体
		'fontSize', // 字号
		'fontName', // 字体
		'italic', // 斜体
		'underline', // 下划线
		'strikeThrough', // 删除线
		'foreColor', // 文字颜色
		'backColor', // 背景颜色
		'link', // 插入链接
		'list', // 列表
		'justify', // 对齐方式
		'quote', // 引用
		'emoticon', // 表情
		'image', // 插入图片
		'fcup', // 上传图片，配合fcup插件
		'table', // 表格
		'video', // 插入视频
		'code', // 插入代码
		'undo', // 撤销
		'redo', // 重复
		'showCode' // 显示源代码
	];

	/*
    editor.customConfig.customUploadImg = function (files, insert) {
        // files 是 input 中选中的文件列表
        // insert 是获取图片 url 后，插入到编辑器的方法
        console.log(files);
        // 上传代码返回结果之后，将图片插入到编辑器中
        //
    }
	*/
	editor.create();
</script>
<script>
	layui.use(['admin', 'form', 'laytpl'], function(admin, form, laytpl) {
		var $ = layui.$;
		form.render();
		router = layui.router();
		// 拉取友链详情
		if (router.search.id) {
			admin.get({
				url: layui.api.weiyu + 'get?id=' + router.search.id,
				async: false,
				success: function(result) {
					let res = result.data;
					let status = res.status;
					$('input[name="id"]').val(res.id);
					if (status == 1) {
						$("input[name='status']").prop("checked", true);
					} else {
						$("input[name='status']").prop("checked", false);
					}
					editor.txt.html(res.content);
					form.render(null, 'form-group');
				}
			});
		} else {
			layui.view.setTitle('新增微语', router.href);
		}
		form.on('submit(weiyu-submit)', function(data) {
			/** 屏蔽回车 **/
			var theEvent = window.event;
			var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
			if (code == 13) {
				return false;
			}
			let datas = data.field;
			if (!datas.status) {
				datas.status = 2;
			} else {
				datas.status = 1;
			}
			
			var time = Math.round(new Date().getTime() / 1000).toString();
			if (!router.search.id) {
                datas.cdat = time;
	        }
			let text = editor.txt.html();
			if (!text) {
				layer.msg('内容不能为空');
				return false;
			}
			datas.content = text;
			text = '';
			admin.post({
				url: layui.api.weiyu + 'save',
				type: 'post',
				data: datas,
				success: function(result) {
					layer.alert(result.msg, {
						title: '提交提示'
					}, function() {
						// 这里加上时间戳,刷新页面
						admin.navigate('/list/weiyu/time=' + time);
					});

				}
			});
		});
	});
</script>
<script>
	// 上传案例
	let up = new fcup({

		id: "weiyu_id", // 绑定id

		url: layui.api.upload, // url地址

		checkurl: layui.api.checkUploadImg, // 检查上传url地址

		type: "jpg,png,jpeg,gif", // 限制上传类型，为空不限制

		shardsize: "0.001", // 每次分片大小，单位为M，默认1M

		minsize: '', // 最小文件上传M数，单位为M，默认为无

		maxsize: "50", // 上传文件最大M数，单位为M，默认200M

		// headers: {"version": "fcup-v2.0"}, // 附加的文件头

		// apped_data: {}, //每次上传的附加数据

		// 定义错误信息
		errormsg: {
			1000: "未找到该上传id",
			1001: "类型不允许上传",
			1002: "上传文件过小",
			1003: "上传文件过大",
			1004: "请求超时"
		},

		// 开始事件                
		start: () => {
			console.log('开始上传');
		},

		// 等待上传事件，可以用来loading
		beforeSend: () => {
			console.log('等待请求中');
		},

		// 上传进度事件
		progress: (num, other) => {
			editor.progress.show(num);
			console.log(num);
			console.log('上传进度' + num);
			console.log("上传类型" + other.type);

			// 以下仅作参考,并不是太准确		 
			console.log("已经上传" + other.current);
			console.log("剩余上传" + other.surplus);
			console.log("已用时间" + other.usetime);
			console.log("预计时间" + other.totaltime);
		},

		// 错误提示
		error: (msg) => {
			layui.layer.alert(msg);
		},
		// 检查地址回调,用于判断文件是否存在,类型,当前上传的片数等操作
		checksuccess: (res) => {

			let data = res ? eval('(' + res + ')') : '';

			let code = data.code;

			let url = data.data.url;

			let msg = data.msg;

			let index = data.data.file_index ? parseInt(data.data.file_index) : 0;

			// 错误提示
			if (code == 1) {
				layui.layer.alert(msg);
				return false;
			}

			// 已经上传
			if (code == 2) {
				editor.cmd.do('insertHTML', '<img src="' + url + '">');
				return false;
			}

			// 如果提供了这个参数,那么将进行断点上传的准备
			if (index != 0) {
				// 设置上传切片的起始位置		   
				up.setshard(index);
			}

			// 如果接口没有错误，必须要返回true，才不会终止上传
			return true;
		},
		// 上传成功回调，回调会根据切片循环，要终止上传循环，必须要return false，成功的情况下要始终要返回true;i
		success: (res) => {

			let data = res ? eval('(' + res + ')') : '';

			let msg = data.msg;

			let url = data.data.url + "?" + Math.random();

			let code = data.code;

			// 错误提示
			if (data.code == 1) {
				layui.layer.alert(msg);
				return false;
			}

			// 成功上传
			if (data.code == 2) {
				editor.cmd.do('insertHTML', '<img src="' + url + '">');
				layui.layer.alert('上传完成');
			}

			// 如果接口没有错误，必须要返回true，才不会终止上传循环
			return true;
		}
	});
</script>
